<template>
<!--inline表示行内表单表示一行放多个-->
  <div>
    <el-form :inline="true"   class="demo-form-inline" :model="cFrom">
      <el-form-item label="一级分类">
        <el-select value="" placeholder="请选择" :disabled="show" v-model="cFrom.categoryId1" @change="handler1">
          <el-option :label="c1.name" :value="c1.id" v-for="c1 in categroyList1 " :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" >
        <el-select value="" placeholder="请选择" :disabled="show" v-model="cFrom.categoryId2" @change="handler2" >
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in categroyList2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select value="" placeholder="请选择" :disabled="show" v-model="cFrom.categoryId3" @change="handler3" >
          <el-option :label="categroy3.name" :value="categroy3.id"  :key="categroy3.id"></el-option>
        </el-select>
      </el-form-item>
    
  </el-form>
  </div>
</template>

<script>
export default {
  name:'CategorySelect',
   props:['show'],
   data() {
      return {
        categroyList1:[],
        categroyList2:[],
        categroy3:{
          id:'',
          name:'',
          category2Id:''
        },
        //收集一级二级三级id
        cFrom:{
          categoryId1:'',
          categoryId2:'',
          categoryId3:''
        }
      }
    },
    methods: {
      async getCategory1(){
         const result = await this.$API.attr.getCategory1();
         if(result.code===200){
            this.categroyList1 = result.data;
         }
      },
      //一级分类的select事件回调,当一级分类option发生变化获取二级分类
      async handler1(){
        //清除数据
        this.categroyList2 = []
        this.categroy3= {id:'',name:'',category2Id:''}
        this.cFrom.categoryId2=''
        this.cFrom.categoryId3 = ''
        //结构数据
        const {categoryId1} = this.cFrom
        this.$emit("getCategory",{categoryId:categoryId1,level:1})
        const result = await this.$API.attr.getCategory2(categoryId1);
        if(result.code===200){
          this.categroyList2 = result.data
        }
      },
      //二级分类获取三级分类
      async handler2(){
        //清除三级分类数据
        this.categroy3= {id:'',name:'',category2Id:''}
        this.cFrom.categoryId3 = ''
        const {categoryId2} = this.cFrom
        this.$emit('getCategory',{categoryId:categoryId2,level:2})
        const result = await this.$API.attr.getCategory3(categoryId2);
        if(result.code===200){
            this.categroy3 = result.data
        }
      },
      handler3(){
          const {categoryId3} = this.cFrom
          this.$emit('getCategory',{categoryId:categoryId3,level:3})
      }
      
    },
    mounted(){
      this.getCategory1()
    }
}
</script>

<style>

</style>